<template>
  <div class="tabItem">
    <div class="wz">
      <ul>
        <li
          v-for="(item, index) in tabList"
          :key="index"
          @click="toXq(item.articleId, item.dataSource)"
        >
          <div class="pic" v-if="item.image">
            <img :src="'data:image/jpeg;base64,' + item.image" alt="" srcset="" />
          </div>
          <div class="text">
            <span :class="classFun(item.articleId)">{{
              textFun(item.articleTitle, item.content)
            }}</span>
            <p class="text_time">
              <span>{{ item.postTime }}</span>
              <span v-show="item.dataSource">来源：{{ item.dataSource }}</span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabList: {
      default: () => {
        return [];
      },
    },
    typeStr: {
      default: null,
    },
  },
  data() {
    return {
      // isPic: false,
      // tabList: [
      //   {
      //     title: "台军一架F-16战机失联，台媒：至今已有7架失联。",
      //     time: "2020-11-17 23:45",
      //   },
      //   {
      //     title: "台湾“川迷”太入戏 “日粉”动真情。",
      //     time: "2020-11-17 23:45",
      //     pic: require("@/assets/common/c573e454-aa1d-4c2f-820d-d93f1c0bc91b__0528cd5fb0d808a6f9d5b4a5397309ad.svg"),
      //   },
      //   {
      //     title: "台军一架F-16战机失联，台媒：至今已有7架失联。",
      //     time: "2020-11-17 23:45",
      //     pic: require("@/assets/common/c573e454-aa1d-4c2f-820d-d93f1c0bc91b__0528cd5fb0d808a6f9d5b4a5397309ad.svg"),
      //   },
      //   {
      //     title: "台军一架F-16战机失联，台媒：至今已有7架失联。",
      //     time: "2020-11-17 23:45",
      //   },
      // ],
    };
  },
  methods: {
    // 点击进入详情页
    toXq(id, source) {
      // 从哪里来的: 首页
      localStorage.whereGo = "index";
      // 来源
      sessionStorage.dataSource = source;
      // 有值，你就不显示，否者 显示
      if (this.typeStr) {
        sessionStorage.typeStr = "no";
      } else {
        sessionStorage.typeStr = "yes";
      }
      // 跳转：
      this.$router.push("/mainDetail/mtDetail/" + id);
      // 追加点击过的本地缓存：
      if (!sessionStorage.xqList) {
        sessionStorage.xqList = JSON.stringify([]);
      }
      let a = JSON.parse(sessionStorage.xqList);
      a.push(id);
      sessionStorage.xqList = JSON.stringify(a);
    },
    // 是否点击过：
    classFun(id) {
      if (!sessionStorage.xqList) {
        sessionStorage.xqList = JSON.stringify([]);
      }
      let a = JSON.parse(sessionStorage.xqList);
      // console.log("有这个值吗", a, id);
      if (a.includes(id)) {
        return ["text_title_box", "ccc"];
      } else {
        return ["text_title_box"];
      }
    },
    textFun(str, content) {
      let num = 30;
      let s = "";
      if (str && str.length) {
        if (str.length > num) {
          s = str.substring(0, num) + "...";
        } else {
          s = str;
        }
        // console.log(str, str.length, s);
        return s;
      } else {
        // 无标题，去内容截取文字当标题
        s = content.substring(0, num) + "...";
        return s;
      }
    },
  },
  mounted() {
    // console.log(this.tabList);
  },
};
</script>

<style lang="scss" scoped>
.tabItem {
  .wz {
    width: calc(100% + 17px + 0.2rem);
    max-height: 350px;
    overflow-y: auto;
    font-size: 18px;
    line-height: 30px;
    ul {
      li {
        box-sizing: border-box;
        display: flex;
        margin-bottom: 30px;
        cursor: pointer;
        padding-bottom: 10px;
        border-bottom: 1px dashed rgb(204, 204, 204, 0.5);
        .pic {
          width: 166px;
          height: 112px;
          // flex: 1;
          margin-right: 50px;
          img {
            width: 166px;
            height: 112px;
            border-radius: 8px;
            // width: 100%;
            // height: 100%;
          }
        }
        .text {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          .text_title_box {
            box-sizing: border-box;
            padding-right: 14px;
          }
          .ccc {
            color: #919293;
          }
          .text_time {
            box-sizing: border-box;
            width: 100%;
            padding-right: 40px;
            margin: 0;
            font-size: 14px;
            color: #666;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
